<template>
  <div class="list-main">
    <h2 class="title">文章列表</h2>
    <div class="sel-area">
      <el-select v-model="queryParam.cate_id"
                 class="cate-sel"
                 clearable
                 placeholder="选择文章分类"
                 @change="searchArticle">
        <el-option v-for="item in cateList"
                   :key="item.id"
                   :label="item.name"
                   :value="item.id" />
      </el-select>
    </div>

    <div class="table">
      <el-table class="article-table"
                :data="tableData"
                border
                style="width: 100%">
        <el-table-column label="封面"
                         min-width="50">
          <template #default="scope">
            <img :src="scope.row.cover_img"
                 alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="title"
                         label="文章标题"
                         min-width="100" />
        <el-table-column prop="content"
                         label="内容"
                         min-width="100" />
        <el-table-column label="分类"
                         min-width="100">
          <template #default="scope">
            <div>{{ typeToTxt(scope.row.cate_id) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="pub_date"
                         label="发表时间"
                         min-width="100" />
        <el-table-column prop="state"
                         label="状态"
                         min-width="100" />
        <el-table-column prop="address"
                         label="操作"
                         min-width="100">
          <template #default="scope">
            <el-button type="danger"
                       size="default"
                       @click="deleteArticle(scope.row.Id)">删除文章</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="pagination">
      <el-pagination v-model:current-page="queryParam.pagenum"
                     v-model:page-size="queryParam.pagesize"
                     :page-sizes="[10, 20, 30, 40]"
                     small
                     background
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="queryParam.total"
                     @size-change="sizeChange"
                     @current-change="searchArticle" />
    </div>

  </div>
</template>

<script setup>
import { articleList, getCates, delArticle } from '@/api/article/index.js'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

// import { useRouter } from 'vue-router'
// const router = useRouter()
// console.log(router.currentRoute.value.query)

const tableData = ref([])
const queryParam = ref({ pagenum: 1, pagesize: 10, total: 0, cate_id: '' })
const cateList = ref([])

getCates().then((el) => {
  cateList.value = el.data
})

function typeToTxt(value) {
  const cate = cateList.value.find((el) => el.id === value)
  return cate ? cate.name : ''
}

function searchArticle() {
  let params = {}
  for (let key in queryParam.value) {
    let val = queryParam.value[key]
    if (val) {
      params[key] = val
    }
  }
  articleList(params).then((el) => {
    if (el.code === 0) {
      tableData.value = el.data.list
      queryParam.value.total = el.data.total
    }
  })
}

function sizeChange() {
  queryParam.value.pagenum = 1
  searchArticle()
}

//刚进页面搜索一次
searchArticle()

function deleteArticle(id) {
  delArticle(id).then((el) => {
    if (el.code === 0) {
      ElMessage({
        message: '删除成功',
        type: 'success',
      })
      searchArticle()
    }
  })
}
</script>

<style lang="scss" scoped>
.list-main {
  .sel-area {
    margin: 20px;
  }
  .table {
    margin: 30px;
    @include tableModify;
    img {
      width: 40px;
      height: 40px;
      object-fit: cover;
    }
  }
}
</style>